import Qt 4.7
import "game.js" as Logic

Item {
    id:menu
    anchors.fill: parent
    opacity: 0.0

    MouseArea {
        anchors.fill: parent;
        onPressed: {}
        onClicked: {}
    }

    //color:"#000"
    Rectangle {
        anchors.fill: parent
        opacity: 0.5
        color:"#000"
    }

    Rectangle {
        id:rl;
        color:"#fff"
        opacity: 0.2
        y:0;
        x: menu.width/2 - menu.opacity*frame.width/2-1;
        width: 1;
        height:menu.height;

    }
    Rectangle {
        id:rr;
        color:"#fff"
        opacity: 0.2
        y:0;
        x: menu.width/2 + menu.opacity*frame.width/2 ;
        width: 1;
        height:menu.height;

    }

    Rectangle {
        id:rb;
        color:"#fff"
        opacity: 0.2
        y:menu.height/2 + menu.opacity*frame.height/2 ;
        x: 0;
        width: menu.width;
        height:1;
    }
    Rectangle {
        id:rt;
        color:"#fff"
        opacity: 0.2
        y:menu.height/2 - menu.opacity*frame.height/2-1 ;
        x: 0;
        width: menu.width;
        height:1;
    }

    Rectangle {
        id:frame
        color:"#000"
        opacity: 1
        anchors.centerIn: parent;
        anchors.margins: 10;
        width:220
        height:500
        scale: menu.opacity

        Column{
            anchors.fill: frame
            anchors.margins: 10
            spacing: 10
            Text {text: "\nYou are playing";color: "#fff"}
            Button {
                color:"#9a9"
                width: parent.width;
                text: "Back to game"
                onClicked: {
                    menu.state="";
                }
            }
            Text {text: "\nAbout";color: "#fff"}
            Rectangle {
                id:difficulty_r
                border.color:  "#fff"
                color:"#ddd"
                radius: 1;
                width: parent.width;
                height:110;
                Text {
                    anchors.fill: parent
                    anchors.margins: 18
                    wrapMode:Text.WordWrap
                    textFormat: Text.RichText
                    text: "<p align=justify>Tap cells to rotate pipes.
                    You have to connect all houses with power station to win the game.</p>
                    <center><small>The game created by
                    Anton Teryaev <br/> anton.teryaev@nokia.com"
                }
            }
            Text {text: "\nStart new game";color: "#fff"}
            Button {
                width: parent.width;
                text: "Easy"
                onClicked: {Logic.restart(0);menu.state="";}
            }
            Button {
                width: parent.width;
                text: "Normal"
                onClicked: {Logic.restart(0.5);menu.state="";}
            }
            Button {
                width: parent.width;
                text: "Hard"
                onClicked: {Logic.restart(1);menu.state="";}
            }

            Text {text: "\nButton for exit";color: "#fff"}
            Button {
                color:"#a99"
                width: parent.width;
                text: "Exit"
                onClicked: {Qt.quit();}
            }
        }
    }

    transitions: Transition { PropertyAnimation { target:menu; properties:"opacity"; duration: 250;easing.type : Easing.OutQuad}}
    states:
        State {
            name: "On"
            when: ma_btn_menu.pressed
            PropertyChanges{ target: menu; opacity:1;}
        }
}
